<template>
  <!-- <div>工作状态衡量</div> -->
  <Card>
    <Row>
      <Col>
        <Select
          v-model="params.project_id"
          v-width="200"
          placeholder="请选择项目"
          @on-change="changepro"
        >
          <Option
            v-for="item in projectList"
            :value="item.project_id"
            :key="item.project_id"
            >{{ item.name }}</Option
          >
        </Select>
      </Col>
      <!-- <Col class="ivu-ml-16">
            <TreeSelect v-model="params.diseases_ids" v-width="200" :data="patient_diseases_role"  multiple  placeholder="请选择疾病类型" @on-change="changeDiseases"  :max-tag-count="5"></TreeSelect>
            </Col> -->
      <Col class="ivu-ml-16">
        <Select
          v-model="params.member_id"
          v-width="200"
          placeholder="请选择客服"
          @on-change="changecc"
        >
          <Option
            v-for="item in ccList"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
      </Col>
      <Col class="ivu-ml-16">
        <RadioGroup
          v-model="patientDate"
          type="button"
          @on-change="changeradio"
        >
          <Radio
            :label="item.value"
            v-for="item in daydata"
            :key="item.value"
            >{{ item.name }}</Radio
          >
        </RadioGroup>
      </Col>
      <Col>
        <DatePicker
          class="ivu-ml-16"
          :editable="false"
          type="daterange"
          v-model="date"
          placeholder="日期选择"
          element-id="date"
          @on-change="changeDate"
          :clearable="false"
        ></DatePicker>
      </Col>
    </Row>
    <!-- <Table highlight-row row-key="hour_name" :indent-size="0" :update-show-children="true"  :columns="tablecolumns"  border :data="data" :loading="loading" size="small" class="ivu-mt-16">
        </Table> -->
    <u-table
      size="small"
      class="ivu-mt-16"
      :data="data"
      style="width: 100%"
      row-key="hour_name"
      lazy
      :load="load"
      :max-height="700"
      :tree-props="{ children: 'children' }"
    >
      <u-table-column
        prop="hour_name"
        label="通话时段统计"
        min-width="40"
      ></u-table-column>
      <u-table-column
        prop="more"
        label="10分钟以上"
        min-width="40"
      ></u-table-column>
      <u-table-column
        prop="three_minute"
        label="1-3分钟"
        min-width="40"
      ></u-table-column>
      <u-table-column
        prop="ten_minute"
        label="3-10分钟"
        min-width="40"
      ></u-table-column>
      <u-table-column
        prop="one_minute"
        label="1分钟以内"
        min-width="40"
      ></u-table-column>
    </u-table>
  </Card>
</template>
<script>
import { voiceStatics, accountList, getDepartmentInfo } from "@/api/hqapi";
import dayjs from "dayjs";
import { UTable, UTableColumn } from "umy-ui";
export default {
  components: {
    UTable,
    UTableColumn,
  },
  data() {
    return {
      date: [],
      params: { project_id: "", diseases_ids: [], member_id: "" },
      projectList: [],
      patient_diseases_role: [],
      patientDate: "yesterDay",
      daydata: [
        { value: "yesterDay", name: "昨天" },
        { value: "toDay", name: "今天" },
        { value: "sevenDay", name: "周" },
        { value: "month", name: "月" },
      ],
      tablecolumns: [
        {
          title: "通话时段统计",
          key: "hour_name",
          align: "center",
          minWidth: 200,
          fixed: "left",
          tree: true,
        },
        {
          title: "10分钟以上",
          key: "more",
          align: "center",
          minWidth: 100,
        },

        {
          title: "1-3分钟",
          key: "three_minute",
          align: "center",
          minWidth: 100,
        },
        {
          title: "3-10分钟",
          key: "ten_minute",
          align: "center",
          minWidth: 100,
        },
        {
          title: "1分钟以内",
          key: "one_minute",
          align: "center",
          minWidth: 100,
        },
      ],
      data: [],
      loading: false,
      ccList: [],
    };
  },
  mounted() {
    this.projectList = JSON.parse(localStorage.getItem("project"));
    this.params.project_id = this.projectList[0]
      ? this.projectList[0].project_id
      : "";
    this.changeradio(this.patientDate);
    // this._getDepartmentInfo();
    this._accountList();
  },
  methods: {
    changepro() {
      this._accountList();
      this._voiceStatics();
    },
    changecc() {
      this._voiceStatics();
    },
    changeDate() {
      this.patientDate = "";
      this._voiceStatics();
    },
    changeradio(e) {
      let week = dayjs().$W;
      let year = dayjs().$y;
      let months = dayjs().$M + 1;
      let day = dayjs().format("YYYY-MM-DD");
      let yesterDay = dayjs().subtract(1, "day").format("YYYY-MM-DD");
      let sevenDay = "";
      let num;
      if (week === 0) num = 7;
      else num = week;
      sevenDay = dayjs()
        .subtract(num - 1, "day")
        .format("YYYY-MM-DD");
      let month = dayjs(`${year}-${months}-1`).format("YYYY-MM-DD");
      if (e === "toDay") {
        this.date = [day, day];
      } else if (e === "yesterDay") {
        this.date = [yesterDay, yesterDay];
      } else if (e === "sevenDay") {
        this.date = [sevenDay, day];
      } else if (e === "month") {
        this.date = [month, day];
      }
      this._voiceStatics();
    },
    changeDiseases(val) {
      this.patient_diseases_child_id = [];
      this.patient_diseases_id = [];
      val.forEach((el) => {
        this.patient_diseases_role.forEach((item) => {
          if (item.children.length > 0) {
            item.children.forEach((it) => {
              // debugger;
              if (el === it.id) {
                this.patient_diseases_child_id.push(it.id);
                this.patient_diseases_id.push(it.pid);
              }
            });
          } else {
            if (el === item.id) {
              this.patient_diseases_child_id.push(item.id);
              this.patient_diseases_id.push(item.pid);
            }
          }
        });
      });
      // console.log(this.patient_diseases_child_id,'patient_diseases_child_id');
      // console.log(this.patient_diseases_id,'patient_diseases_id');
      this._voiceStatics();
    },
    // 获取疾病类型
    _getDepartmentInfo() {
      getDepartmentInfo({ pid: 0 }).then((res) => {
        this.patient_diseases_role = res.patient_diseases;
      });
    },
    // 获取客服人员
    _accountList() {
      accountList({ project_id: this.params.project_id }).then((res) => {
        this.ccList = res;
      });
    },
    _voiceStatics() {
      this.loading = true;
      let diseases_id = [...new Set(this.patient_diseases_id)];
      let diseases_child = [...new Set(this.patient_diseases_child_id)];
      const params = {
        project_id: this.params.project_id,
        member_id: this.params.member_id,
        // start_time: '2021-01-01',
        // end_time: '2022-07-31',
        start_time: this.date[0]
          ? dayjs(this.date[0]).format("YYYY-MM-DD")
          : "",
        end_time: this.date[1] ? dayjs(this.date[1]).format("YYYY-MM-DD") : "",
        patient_diseases_id: diseases_id.join(","), // 一级病种
        patient_diseases_child_id: diseases_child.join(","), // 子级病种
      };
      voiceStatics(params)
        .then((res) => {
          this.data = res;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    load() {
      //
    },
  },
};
</script>
